
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-left-double"></use>
                    </svg>
                    <div class="name">日历 箭头左双</div>
                    <div class="fontclass">#el-icon-web-chevron-left-double</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-up"></use>
                    </svg>
                    <div class="name">up</div>
                    <div class="fontclass">#el-icon-web-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-add"></use>
                    </svg>
                    <div class="name">add</div>
                    <div class="fontclass">#el-icon-web-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-close-solid"></use>
                    </svg>
                    <div class="name">add</div>
                    <div class="fontclass">#el-icon-web-close-solid</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-1"></use>
                    </svg>
                    <div class="name">1 </div>
                    <div class="fontclass">#el-icon-web-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-2"></use>
                    </svg>
                    <div class="name">2</div>
                    <div class="fontclass">#el-icon-web-2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-3"></use>
                    </svg>
                    <div class="name">3</div>
                    <div class="fontclass">#el-icon-web-3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-4"></use>
                    </svg>
                    <div class="name">4</div>
                    <div class="fontclass">#el-icon-web-4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-5"></use>
                    </svg>
                    <div class="name">5</div>
                    <div class="fontclass">#el-icon-web-5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-6"></use>
                    </svg>
                    <div class="name">6</div>
                    <div class="fontclass">#el-icon-web-6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-7"></use>
                    </svg>
                    <div class="name">7</div>
                    <div class="fontclass">#el-icon-web-7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-8"></use>
                    </svg>
                    <div class="name">8</div>
                    <div class="fontclass">#el-icon-web-8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-9"></use>
                    </svg>
                    <div class="name">9</div>
                    <div class="fontclass">#el-icon-web-9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chilun"></use>
                    </svg>
                    <div class="name">齿轮</div>
                    <div class="fontclass">#el-icon-web-chilun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-sign-out"></use>
                    </svg>
                    <div class="name">退出</div>
                    <div class="fontclass">#el-icon-web-sign-out</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-private"></use>
                    </svg>
                    <div class="name">业务图标—私</div>
                    <div class="fontclass">#el-icon-web-private</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-wendang"></use>
                    </svg>
                    <div class="name">文档</div>
                    <div class="fontclass">#el-icon-web-wendang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-customer"></use>
                    </svg>
                    <div class="name">客户</div>
                    <div class="fontclass">#el-icon-web-customer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-xiangshang11"></use>
                    </svg>
                    <div class="name">向上 (1) (1)</div>
                    <div class="fontclass">#el-icon-web-xiangshang11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-daiban"></use>
                    </svg>
                    <div class="name">待办</div>
                    <div class="fontclass">#el-icon-web-daiban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-down1"></use>
                    </svg>
                    <div class="name">up</div>
                    <div class="fontclass">#el-icon-web-down1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-user-add"></use>
                    </svg>
                    <div class="name">user-add</div>
                    <div class="fontclass">#el-icon-web-user-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-user-close"></use>
                    </svg>
                    <div class="name">user-close</div>
                    <div class="fontclass">#el-icon-web-user-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-building"></use>
                    </svg>
                    <div class="name">楼盘</div>
                    <div class="fontclass">#el-icon-web-building</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-arrow-down-bold"></use>
                    </svg>
                    <div class="name">up</div>
                    <div class="fontclass">#el-icon-web-arrow-down-bold</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#el-icon-web-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-arrow-up-bold"></use>
                    </svg>
                    <div class="name">up</div>
                    <div class="fontclass">#el-icon-web-arrow-up-bold</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-building-automation"></use>
                    </svg>
                    <div class="name">楼宇自控</div>
                    <div class="fontclass">#el-icon-web-building-automation</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-triangle-left"></use>
                    </svg>
                    <div class="name">triangle-left</div>
                    <div class="fontclass">#el-icon-web-triangle-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-triangle-down"></use>
                    </svg>
                    <div class="name">triangle-down</div>
                    <div class="fontclass">#el-icon-web-triangle-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-triangle-right"></use>
                    </svg>
                    <div class="name">triangle-right</div>
                    <div class="fontclass">#el-icon-web-triangle-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-triangle-up"></use>
                    </svg>
                    <div class="name">triangle-up</div>
                    <div class="fontclass">#el-icon-web-triangle-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-time"></use>
                    </svg>
                    <div class="name">time</div>
                    <div class="fontclass">#el-icon-web-time</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-trash"></use>
                    </svg>
                    <div class="name">trash</div>
                    <div class="fontclass">#el-icon-web-trash</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-user"></use>
                    </svg>
                    <div class="name">user</div>
                    <div class="fontclass">#el-icon-web-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-user-plus"></use>
                    </svg>
                    <div class="name">user-add</div>
                    <div class="fontclass">#el-icon-web-user-plus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-underline"></use>
                    </svg>
                    <div class="name">underline</div>
                    <div class="fontclass">#el-icon-web-underline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-user-circle"></use>
                    </svg>
                    <div class="name">user-circle</div>
                    <div class="fontclass">#el-icon-web-user-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-unlock"></use>
                    </svg>
                    <div class="name">unlock</div>
                    <div class="fontclass">#el-icon-web-unlock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-upload"></use>
                    </svg>
                    <div class="name">upload</div>
                    <div class="fontclass">#el-icon-web-upload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-volume-high"></use>
                    </svg>
                    <div class="name">volume-high</div>
                    <div class="fontclass">#el-icon-web-volume-high</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-users"></use>
                    </svg>
                    <div class="name">users</div>
                    <div class="fontclass">#el-icon-web-users</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-volume-off"></use>
                    </svg>
                    <div class="name">volume-off</div>
                    <div class="fontclass">#el-icon-web-volume-off</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-video"></use>
                    </svg>
                    <div class="name">video</div>
                    <div class="fontclass">#el-icon-web-video</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-volume-low"></use>
                    </svg>
                    <div class="name">volume-low</div>
                    <div class="fontclass">#el-icon-web-volume-low</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-warning"></use>
                    </svg>
                    <div class="name">warning</div>
                    <div class="fontclass">#el-icon-web-warning</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-wrench"></use>
                    </svg>
                    <div class="name">wrench</div>
                    <div class="fontclass">#el-icon-web-wrench</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-zoom-in"></use>
                    </svg>
                    <div class="name">zoom-in</div>
                    <div class="fontclass">#el-icon-web-zoom-in</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-alert"></use>
                    </svg>
                    <div class="name">alert</div>
                    <div class="fontclass">#el-icon-web-alert</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-add-file"></use>
                    </svg>
                    <div class="name">add-file</div>
                    <div class="fontclass">#el-icon-web-add-file</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-alert-circle"></use>
                    </svg>
                    <div class="name">alert-circle</div>
                    <div class="fontclass">#el-icon-web-alert-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-zoom-out"></use>
                    </svg>
                    <div class="name">zoom-out</div>
                    <div class="fontclass">#el-icon-web-zoom-out</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-align-center"></use>
                    </svg>
                    <div class="name">align-center</div>
                    <div class="fontclass">#el-icon-web-align-center</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-align-left"></use>
                    </svg>
                    <div class="name">align-left</div>
                    <div class="fontclass">#el-icon-web-align-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-align-right"></use>
                    </svg>
                    <div class="name">align-right</div>
                    <div class="fontclass">#el-icon-web-align-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-arrow-left"></use>
                    </svg>
                    <div class="name">arrow-left</div>
                    <div class="fontclass">#el-icon-web-arrow-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-arrow-down"></use>
                    </svg>
                    <div class="name">arrow-down</div>
                    <div class="fontclass">#el-icon-web-arrow-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-align-justify"></use>
                    </svg>
                    <div class="name">align-justify</div>
                    <div class="fontclass">#el-icon-web-align-justify</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-arrow-expand"></use>
                    </svg>
                    <div class="name">arrow-expand</div>
                    <div class="fontclass">#el-icon-web-arrow-expand</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-arrow-right"></use>
                    </svg>
                    <div class="name">arrow-right</div>
                    <div class="fontclass">#el-icon-web-arrow-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-arrow-shrink"></use>
                    </svg>
                    <div class="name">arrow-shrink</div>
                    <div class="fontclass">#el-icon-web-arrow-shrink</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-bell"></use>
                    </svg>
                    <div class="name">bell</div>
                    <div class="fontclass">#el-icon-web-bell</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-attach-file"></use>
                    </svg>
                    <div class="name">attach-file</div>
                    <div class="fontclass">#el-icon-web-attach-file</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-bold"></use>
                    </svg>
                    <div class="name">bold</div>
                    <div class="fontclass">#el-icon-web-bold</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-arrow-up"></use>
                    </svg>
                    <div class="name">arrow-up</div>
                    <div class="fontclass">#el-icon-web-arrow-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-bookmark"></use>
                    </svg>
                    <div class="name">bookmark</div>
                    <div class="fontclass">#el-icon-web-bookmark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-book"></use>
                    </svg>
                    <div class="name">book</div>
                    <div class="fontclass">#el-icon-web-book</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-camera"></use>
                    </svg>
                    <div class="name">camera</div>
                    <div class="fontclass">#el-icon-web-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chat"></use>
                    </svg>
                    <div class="name">chat</div>
                    <div class="fontclass">#el-icon-web-chat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-calendar"></use>
                    </svg>
                    <div class="name">calendar</div>
                    <div class="fontclass">#el-icon-web-calendar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-briefcase"></use>
                    </svg>
                    <div class="name">briefcase</div>
                    <div class="fontclass">#el-icon-web-briefcase</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chat-text"></use>
                    </svg>
                    <div class="name">chat-text</div>
                    <div class="fontclass">#el-icon-web-chat-text</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chat-group"></use>
                    </svg>
                    <div class="name">chat-group</div>
                    <div class="fontclass">#el-icon-web-chat-group</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chat-working"></use>
                    </svg>
                    <div class="name">chat-working</div>
                    <div class="fontclass">#el-icon-web-chat-working</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-check"></use>
                    </svg>
                    <div class="name">check</div>
                    <div class="fontclass">#el-icon-web-check</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-check-mini"></use>
                    </svg>
                    <div class="name">check-mini</div>
                    <div class="fontclass">#el-icon-web-check-mini</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-down"></use>
                    </svg>
                    <div class="name">chevron-down</div>
                    <div class="fontclass">#el-icon-web-chevron-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-down-mini"></use>
                    </svg>
                    <div class="name">chevron-down-mini</div>
                    <div class="fontclass">#el-icon-web-chevron-down-mini</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-left"></use>
                    </svg>
                    <div class="name">chevron-left</div>
                    <div class="fontclass">#el-icon-web-chevron-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-left-mini"></use>
                    </svg>
                    <div class="name">chevron-left-mini</div>
                    <div class="fontclass">#el-icon-web-chevron-left-mini</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-check-circle"></use>
                    </svg>
                    <div class="name">check-circle</div>
                    <div class="fontclass">#el-icon-web-check-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-right"></use>
                    </svg>
                    <div class="name">chevron-right</div>
                    <div class="fontclass">#el-icon-web-chevron-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-right-mini"></use>
                    </svg>
                    <div class="name">chevron-right-mini</div>
                    <div class="fontclass">#el-icon-web-chevron-right-mini</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-up"></use>
                    </svg>
                    <div class="name">chevron-up</div>
                    <div class="fontclass">#el-icon-web-chevron-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-up-mini"></use>
                    </svg>
                    <div class="name">chevron-up-mini</div>
                    <div class="fontclass">#el-icon-web-chevron-up-mini</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-clipboard"></use>
                    </svg>
                    <div class="name">clipboard</div>
                    <div class="fontclass">#el-icon-web-clipboard</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-close"></use>
                    </svg>
                    <div class="name">close</div>
                    <div class="fontclass">#el-icon-web-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-cloud"></use>
                    </svg>
                    <div class="name">cloud</div>
                    <div class="fontclass">#el-icon-web-cloud</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-close-mini"></use>
                    </svg>
                    <div class="name">close-mini</div>
                    <div class="fontclass">#el-icon-web-close-mini</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-contract"></use>
                    </svg>
                    <div class="name">contract</div>
                    <div class="fontclass">#el-icon-web-contract</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-code-unfold"></use>
                    </svg>
                    <div class="name">code-unfold</div>
                    <div class="fontclass">#el-icon-web-code-unfold</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-code"></use>
                    </svg>
                    <div class="name">code</div>
                    <div class="fontclass">#el-icon-web-code</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-code-working"></use>
                    </svg>
                    <div class="name">code-working</div>
                    <div class="fontclass">#el-icon-web-code-working</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-copy"></use>
                    </svg>
                    <div class="name">copy</div>
                    <div class="fontclass">#el-icon-web-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-crop"></use>
                    </svg>
                    <div class="name">crop</div>
                    <div class="fontclass">#el-icon-web-crop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-dropdown"></use>
                    </svg>
                    <div class="name">dropdown</div>
                    <div class="fontclass">#el-icon-web-dropdown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-dashboard"></use>
                    </svg>
                    <div class="name">dashboard</div>
                    <div class="fontclass">#el-icon-web-dashboard</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-desktop"></use>
                    </svg>
                    <div class="name">desktop</div>
                    <div class="fontclass">#el-icon-web-desktop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-download"></use>
                    </svg>
                    <div class="name">download</div>
                    <div class="fontclass">#el-icon-web-download</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-dropleft"></use>
                    </svg>
                    <div class="name">dropleft</div>
                    <div class="fontclass">#el-icon-web-dropleft</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-dropright"></use>
                    </svg>
                    <div class="name">dropright</div>
                    <div class="fontclass">#el-icon-web-dropright</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-dropup"></use>
                    </svg>
                    <div class="name">dropup</div>
                    <div class="fontclass">#el-icon-web-dropup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-edit"></use>
                    </svg>
                    <div class="name">edit</div>
                    <div class="fontclass">#el-icon-web-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-expand"></use>
                    </svg>
                    <div class="name">expand</div>
                    <div class="fontclass">#el-icon-web-expand</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-emoticon"></use>
                    </svg>
                    <div class="name">emoticon</div>
                    <div class="fontclass">#el-icon-web-emoticon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-envelope"></use>
                    </svg>
                    <div class="name">envelope</div>
                    <div class="fontclass">#el-icon-web-envelope</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-envelope-open"></use>
                    </svg>
                    <div class="name">envelope-open</div>
                    <div class="fontclass">#el-icon-web-envelope-open</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-extension"></use>
                    </svg>
                    <div class="name">extension</div>
                    <div class="fontclass">#el-icon-web-extension</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-eye-close"></use>
                    </svg>
                    <div class="name">eye-close</div>
                    <div class="fontclass">#el-icon-web-eye-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-folder"></use>
                    </svg>
                    <div class="name">folder</div>
                    <div class="fontclass">#el-icon-web-folder</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-format-clear"></use>
                    </svg>
                    <div class="name">format-clear</div>
                    <div class="fontclass">#el-icon-web-format-clear</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-fullscreen"></use>
                    </svg>
                    <div class="name">fullscreen</div>
                    <div class="fontclass">#el-icon-web-fullscreen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-fullscreen-exit"></use>
                    </svg>
                    <div class="name">fullscreen-exit</div>
                    <div class="fontclass">#el-icon-web-fullscreen-exit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-flag"></use>
                    </svg>
                    <div class="name">flag</div>
                    <div class="fontclass">#el-icon-web-flag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-file"></use>
                    </svg>
                    <div class="name">file</div>
                    <div class="fontclass">#el-icon-web-file</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-eye"></use>
                    </svg>
                    <div class="name">eye</div>
                    <div class="fontclass">#el-icon-web-eye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-gallery"></use>
                    </svg>
                    <div class="name">gallery</div>
                    <div class="fontclass">#el-icon-web-gallery</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-globe"></use>
                    </svg>
                    <div class="name">globe</div>
                    <div class="fontclass">#el-icon-web-globe</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-grid"></use>
                    </svg>
                    <div class="name">grid-4</div>
                    <div class="fontclass">#el-icon-web-grid</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-graph-up"></use>
                    </svg>
                    <div class="name">graph-up</div>
                    <div class="fontclass">#el-icon-web-graph-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-grid-1"></use>
                    </svg>
                    <div class="name">grid-9</div>
                    <div class="fontclass">#el-icon-web-grid-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-graph-down"></use>
                    </svg>
                    <div class="name">graph-down</div>
                    <div class="fontclass">#el-icon-web-graph-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-hammer"></use>
                    </svg>
                    <div class="name">hammer</div>
                    <div class="fontclass">#el-icon-web-hammer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-heart"></use>
                    </svg>
                    <div class="name">heart</div>
                    <div class="fontclass">#el-icon-web-heart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-heart-outline"></use>
                    </svg>
                    <div class="name">heart-outline</div>
                    <div class="fontclass">#el-icon-web-heart-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-help-circle"></use>
                    </svg>
                    <div class="name">help-circle</div>
                    <div class="fontclass">#el-icon-web-help-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-help"></use>
                    </svg>
                    <div class="name">help</div>
                    <div class="fontclass">#el-icon-web-help</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-inbox"></use>
                    </svg>
                    <div class="name">inbox</div>
                    <div class="fontclass">#el-icon-web-inbox</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-image"></use>
                    </svg>
                    <div class="name">image</div>
                    <div class="fontclass">#el-icon-web-image</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-home"></use>
                    </svg>
                    <div class="name">home</div>
                    <div class="fontclass">#el-icon-web-home</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-indent-decrease"></use>
                    </svg>
                    <div class="name">indent-decrease</div>
                    <div class="fontclass">#el-icon-web-indent-decrease</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-indent-increase"></use>
                    </svg>
                    <div class="name">indent-increase</div>
                    <div class="fontclass">#el-icon-web-indent-increase</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-info"></use>
                    </svg>
                    <div class="name">info</div>
                    <div class="fontclass">#el-icon-web-info</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-italic"></use>
                    </svg>
                    <div class="name">italic</div>
                    <div class="fontclass">#el-icon-web-italic</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-large-point"></use>
                    </svg>
                    <div class="name">large-point</div>
                    <div class="fontclass">#el-icon-web-large-point</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-info-circle"></use>
                    </svg>
                    <div class="name">info-circle</div>
                    <div class="fontclass">#el-icon-web-info-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-layout"></use>
                    </svg>
                    <div class="name">layout</div>
                    <div class="fontclass">#el-icon-web-layout</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-library"></use>
                    </svg>
                    <div class="name">library</div>
                    <div class="fontclass">#el-icon-web-library</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-link-broken"></use>
                    </svg>
                    <div class="name">link-broken</div>
                    <div class="fontclass">#el-icon-web-link-broken</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-link"></use>
                    </svg>
                    <div class="name">link</div>
                    <div class="fontclass">#el-icon-web-link</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-list"></use>
                    </svg>
                    <div class="name">list</div>
                    <div class="fontclass">#el-icon-web-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-link-intact"></use>
                    </svg>
                    <div class="name">link-intact</div>
                    <div class="fontclass">#el-icon-web-link-intact</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-list-numbered"></use>
                    </svg>
                    <div class="name">list-numbered</div>
                    <div class="fontclass">#el-icon-web-list-numbered</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-list-bulleted"></use>
                    </svg>
                    <div class="name">list-bulleted</div>
                    <div class="fontclass">#el-icon-web-list-bulleted</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-map"></use>
                    </svg>
                    <div class="name">map</div>
                    <div class="fontclass">#el-icon-web-map</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-medium-point"></use>
                    </svg>
                    <div class="name">medium-point</div>
                    <div class="fontclass">#el-icon-web-medium-point</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-lock"></use>
                    </svg>
                    <div class="name">lock</div>
                    <div class="fontclass">#el-icon-web-lock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-loop"></use>
                    </svg>
                    <div class="name">loop</div>
                    <div class="fontclass">#el-icon-web-loop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-menu"></use>
                    </svg>
                    <div class="name">menu</div>
                    <div class="fontclass">#el-icon-web-menu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-memory"></use>
                    </svg>
                    <div class="name">memory</div>
                    <div class="fontclass">#el-icon-web-memory</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-minus"></use>
                    </svg>
                    <div class="name">minus</div>
                    <div class="fontclass">#el-icon-web-minus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-mobile"></use>
                    </svg>
                    <div class="name">mobile</div>
                    <div class="fontclass">#el-icon-web-mobile</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-move"></use>
                    </svg>
                    <div class="name">move</div>
                    <div class="fontclass">#el-icon-web-move</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-minus-circle"></use>
                    </svg>
                    <div class="name">minus-circle</div>
                    <div class="fontclass">#el-icon-web-minus-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-more-horizontal"></use>
                    </svg>
                    <div class="name">more-horizontal</div>
                    <div class="fontclass">#el-icon-web-more-horizontal</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-musical"></use>
                    </svg>
                    <div class="name">musical</div>
                    <div class="fontclass">#el-icon-web-musical</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-more-vertical"></use>
                    </svg>
                    <div class="name">more-vertical</div>
                    <div class="fontclass">#el-icon-web-more-vertical</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-order"></use>
                    </svg>
                    <div class="name">order</div>
                    <div class="fontclass">#el-icon-web-order</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-pie-chart"></use>
                    </svg>
                    <div class="name">pie-chart</div>
                    <div class="fontclass">#el-icon-web-pie-chart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-pause"></use>
                    </svg>
                    <div class="name">pause</div>
                    <div class="fontclass">#el-icon-web-pause</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-payment"></use>
                    </svg>
                    <div class="name">payment</div>
                    <div class="fontclass">#el-icon-web-payment</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-paperclip"></use>
                    </svg>
                    <div class="name">paperclip</div>
                    <div class="fontclass">#el-icon-web-paperclip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-pencil"></use>
                    </svg>
                    <div class="name">pencil</div>
                    <div class="fontclass">#el-icon-web-pencil</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-play"></use>
                    </svg>
                    <div class="name">play</div>
                    <div class="fontclass">#el-icon-web-play</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-plugin"></use>
                    </svg>
                    <div class="name">plugin</div>
                    <div class="fontclass">#el-icon-web-plugin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-print"></use>
                    </svg>
                    <div class="name">print</div>
                    <div class="fontclass">#el-icon-web-print</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-plus"></use>
                    </svg>
                    <div class="name">plus</div>
                    <div class="fontclass">#el-icon-web-plus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-plus-circle"></use>
                    </svg>
                    <div class="name">plus-circle</div>
                    <div class="fontclass">#el-icon-web-plus-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-power"></use>
                    </svg>
                    <div class="name">power</div>
                    <div class="fontclass">#el-icon-web-power</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-pluse"></use>
                    </svg>
                    <div class="name">pluse</div>
                    <div class="fontclass">#el-icon-web-pluse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-random"></use>
                    </svg>
                    <div class="name">random</div>
                    <div class="fontclass">#el-icon-web-random</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-quote-right"></use>
                    </svg>
                    <div class="name">quote-right</div>
                    <div class="fontclass">#el-icon-web-quote-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-reload"></use>
                    </svg>
                    <div class="name">reload</div>
                    <div class="fontclass">#el-icon-web-reload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-refresh"></use>
                    </svg>
                    <div class="name">refresh</div>
                    <div class="fontclass">#el-icon-web-refresh</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-replay"></use>
                    </svg>
                    <div class="name">replay</div>
                    <div class="fontclass">#el-icon-web-replay</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-reply"></use>
                    </svg>
                    <div class="name">reply</div>
                    <div class="fontclass">#el-icon-web-reply</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-rubber"></use>
                    </svg>
                    <div class="name">rubber</div>
                    <div class="fontclass">#el-icon-web-rubber</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-search"></use>
                    </svg>
                    <div class="name">search</div>
                    <div class="fontclass">#el-icon-web-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-shopping-cart"></use>
                    </svg>
                    <div class="name">shopping-cart</div>
                    <div class="fontclass">#el-icon-web-shopping-cart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-scissor"></use>
                    </svg>
                    <div class="name">scissor</div>
                    <div class="fontclass">#el-icon-web-scissor</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-settings"></use>
                    </svg>
                    <div class="name">settings</div>
                    <div class="fontclass">#el-icon-web-settings</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-share"></use>
                    </svg>
                    <div class="name">share</div>
                    <div class="fontclass">#el-icon-web-share</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-small-point"></use>
                    </svg>
                    <div class="name">small-point</div>
                    <div class="fontclass">#el-icon-web-small-point</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-signal"></use>
                    </svg>
                    <div class="name">signal</div>
                    <div class="fontclass">#el-icon-web-signal</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-sort-vertical"></use>
                    </svg>
                    <div class="name">sort-vertical</div>
                    <div class="fontclass">#el-icon-web-sort-vertical</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-sort-asc"></use>
                    </svg>
                    <div class="name">sort-asc</div>
                    <div class="fontclass">#el-icon-web-sort-asc</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-sort-des"></use>
                    </svg>
                    <div class="name">sort-des</div>
                    <div class="fontclass">#el-icon-web-sort-des</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-star-outline"></use>
                    </svg>
                    <div class="name">star-outline</div>
                    <div class="fontclass">#el-icon-web-star-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-star-half"></use>
                    </svg>
                    <div class="name">star-half</div>
                    <div class="fontclass">#el-icon-web-star-half</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-stats-bars"></use>
                    </svg>
                    <div class="name">stats-bars</div>
                    <div class="fontclass">#el-icon-web-stats-bars</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-stop"></use>
                    </svg>
                    <div class="name">stop</div>
                    <div class="fontclass">#el-icon-web-stop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-tag"></use>
                    </svg>
                    <div class="name">tag</div>
                    <div class="fontclass">#el-icon-web-tag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-star"></use>
                    </svg>
                    <div class="name">star</div>
                    <div class="fontclass">#el-icon-web-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-text-type"></use>
                    </svg>
                    <div class="name">text-type</div>
                    <div class="fontclass">#el-icon-web-text-type</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-thumb-down"></use>
                    </svg>
                    <div class="name">thumb-down</div>
                    <div class="fontclass">#el-icon-web-thumb-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-text"></use>
                    </svg>
                    <div class="name">text</div>
                    <div class="fontclass">#el-icon-web-text</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-table"></use>
                    </svg>
                    <div class="name">table</div>
                    <div class="fontclass">#el-icon-web-table</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-thumb-up"></use>
                    </svg>
                    <div class="name">thumb-up</div>
                    <div class="fontclass">#el-icon-web-thumb-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-chevron-right-double"></use>
                    </svg>
                    <div class="name">日历 箭头左双</div>
                    <div class="fontclass">#el-icon-web-chevron-right-double</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-add-solid"></use>
                    </svg>
                    <div class="name">add</div>
                    <div class="fontclass">#el-icon-web-add-solid</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-jianguanmoshi"></use>
                    </svg>
                    <div class="name">监管模式</div>
                    <div class="fontclass">#el-icon-web-jianguanmoshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-zulin"></use>
                    </svg>
                    <div class="name">租赁-1</div>
                    <div class="fontclass">#el-icon-web-zulin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-web-reset-pwd"></use>
                    </svg>
                    <div class="name">重置密码</div>
                    <div class="fontclass">#el-icon-web-reset-pwd</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#el-icon-web-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
